<!DOCTYPE html>
<html lang="es">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">

		<title>Usuario</title>

		<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>

		<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

		<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>

		<script src="//cdn.datatables.net/plug-ins/9dcbecd42ad/integration/bootstrap/3/dataTables.bootstrap.js"></script>

		<link  href="../css/bootstrap.min.css" rel="stylesheet">

		<link  href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css" rel="stylesheet">

		<link  href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

		<script src="../js/datatable.js"></script>
		<script src="../js/spinner.js"></script>
	</head>

	<body>
		<div class="container">

			<h1><i class="fa fa-male"></i>USUARIO</h1>
			<hr />

			<div id="myTabContent" class="tab-content">
				<div class="tab-pane fade active in" id="paso1">

					<div class="well well-sm">

						<h2 class="panel-title">Mantenimiento Usuario</h2>

						<div class="panel-body">
							<div class="panel panel-info">
								<div class="panel-heading">
									Datos del Usuario
								</div>
								<div class="panel-body">

									<form class="form-horizontal">
										<div class="form-group">
											<label for="idUsuario" class="col-lg-2 control-label">Codigo</label>
											<div class="col-lg-10">
												<input type="text" class="form-control" id="idUsuario">
											</div>
										</div>

										<div class="form-group">
											<label for="nombre" class="col-lg-2 control-label">Nombre</label>
											<div class="col-lg-10">
												<input type="text" class="form-control" id="nombre">
											</div>
										</div>
										<div class="form-group">
											<label for="apellidoPaterno" class="col-lg-2 control-label">Apellido Paterno</label>
											<div class="col-lg-10">
												<input type="text" class="form-control" id="apellidoPaterno">
											</div>
										</div>

										<div class="form-group">
											<label for="apellidoMaterno" class="col-lg-2 control-label">Apellido Materno</label>
											<div class="col-lg-10">
												<input type="text" class="form-control" id="apellidoMaterno">
											</div>
										</div>

										<div class="form-group">
										<label for="fechaNacimiento" class="col-lg-2 control-label">Fecha
											De Nacimiento</label>
										<div class="col-lg-10">
											<input type="text" class="form-control" id="fechaNacimiento">
										</div>
									</div>
										<div class="form-group">
											<label for="email" class="col-lg-2 control-label">E-mail</label>
											<div class="col-lg-10">
												<input type="text" class="form-control" id="email">
											</div>
										</div>
										<div class="form-group">
											<label for="user" class="col-lg-2 control-label">User</label>
											<div class="col-lg-10">
												<input type="text" class="form-control" id="user">
											</div>
										</div>
										
										<div class="form-group">
											<label for="password" class="col-lg-2 control-label">Password</label>
											<div class="col-lg-10">
												<input type="text" class="form-control" id="password">
											</div>
										</div>
										
										<div class="form-group">
											<label for="descripcionCargo" class="col-lg-2 control-label">Cargo</label>
											<div class="col-lg-10">
												<input type="text" class="form-control" id="descripcionCargo">
											</div>
										</div>
										
										<div class="form-group">
											<label for="descripcionArea" class="col-lg-2 control-label">Área</label>
											<div class="col-lg-10">
												<input type="text" class="form-control" id="descripcionArea">
											</div>
										</div>
										<div class="form-group">
											<label for="descripcionEstado" class="col-lg-2 control-label">Estado</label>
											<div class="col-lg-10">
												<input type="text" class="form-control" id="descripcionCargo">
											</div>
										</div>
										
										<div class="form-group">
											<label for="descripcionJefe" class="col-lg-2 control-label">Jefe</label>
											<div class="col-lg-10">
												<input type="text" class="form-control" id="descripcionJefe">
											</div>
										</div>

										<div class="form-group">
											<div class="col-lg-10 col-lg-offset-2">
												<button class="btn btn-default">
													<i class="fa fa-times"></i> Cancelar
												</button>
												<button type="submit" class="btn btn-primary">
													<i class="fa fa-check"></i> Grabar
												</button>
											</div>
										</div>
									</form>

								</div>
							</div>
						</div>
						<div class="panel-body">
							<div class="panel panel-info">
								<div class="panel-heading">
									Usuarios Registrados
								</div>
								<div class="panel-body">
									<table id="tabla" class="display" cellspacing="0" width="100%">
										<thead>
											<tr>
												<th>Codigo</th>
												<th>Nombre</th>
												<th>Apellido Paterno</th>
												<th>Apellido Materno</th>
												<th>Fecha de Nacimiento</th>
												<th>E-mail</th>
												<th>User</th>
												<th>Cargo</th>
												<th>Área</th>
												<th>Estado</th>
												<th>Jefe</th>
												<th></th>
												<th></th>
											</tr>
										</thead>

										<tfoot>
											<tr>
												<th>Codigo</th>
												<th>Nombre</th>
												<th>Apellido Paterno</th>
												<th>Apellido Materno</th>
												<th>Fecha de Nacimiento</th>
												<th>E-mail</th>
												<th>User</th>
												<th>Cargo</th>
												<th>Área</th>
												<th>Estado</th>
												<th>Jefe</th>
												<th></th>
												<th></th>
											</tr>
										</tfoot>

										<tbody>
											<tr>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td><a href="#" class="btn btn-warning btn-xs"><i class="fa fa-retweet"></i> Actualizar</a></td>
												<td><a href="#" class="btn btn-danger btn-xs"><i class="fa fa-times"></i> Eliminar</a></td>
											</tr>
											<tr>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td><a href="#" class="btn btn-warning btn-xs"><i class="fa fa-retweet"></i> Actualizar</a></td>
												<td><a href="#" class="btn btn-danger btn-xs"><i class="fa fa-times"></i> Eliminar</a></td>
											</tr>
											<tr>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td><a href="#" class="btn btn-warning btn-xs"><i class="fa fa-retweet"></i> Actualizar</a></td>
												<td><a href="#" class="btn btn-danger btn-xs"><i class="fa fa-times"></i> Eliminar</a></td>
											</tr>
											<tr>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td><a href="#" class="btn btn-warning btn-xs"><i class="fa fa-retweet"></i> Actualizar</a></td>
												<td><a href="#" class="btn btn-danger btn-xs"><i class="fa fa-times"></i> Eliminar</a></td>
											</tr>
											<tr>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td><a href="#" class="btn btn-warning btn-xs"><i class="fa fa-retweet"></i> Actualizar</a></td>
												<td><a href="#" class="btn btn-danger btn-xs"><i class="fa fa-times"></i> Eliminar</a></td>
											</tr>
											<tr>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td><a href="#" class="btn btn-warning btn-xs"><i class="fa fa-retweet"></i> Actualizar</a></td>
												<td><a href="#" class="btn btn-danger btn-xs"><i class="fa fa-times"></i> Eliminar</a></td>
											</tr>
											<tr>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td><a href="#" class="btn btn-warning btn-xs"><i class="fa fa-retweet"></i> Actualizar</a></td>
												<td><a href="#" class="btn btn-danger btn-xs"><i class="fa fa-times"></i> Eliminar</a></td>
											</tr>
											<tr>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td><a href="#" class="btn btn-warning btn-xs"><i class="fa fa-retweet"></i> Actualizar</a></td>
												<td><a href="#" class="btn btn-danger btn-xs"><i class="fa fa-times"></i> Eliminar</a></td>
											</tr>
											<tr>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td><a href="#" class="btn btn-warning btn-xs"><i class="fa fa-retweet"></i> Actualizar</a></td>
												<td><a href="#" class="btn btn-danger btn-xs"><i class="fa fa-times"></i> Eliminar</a></td>
											</tr>
											<tr>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td><a href="#" class="btn btn-warning btn-xs"><i class="fa fa-retweet"></i> Actualizar</a></td>
												<td><a href="#" class="btn btn-danger btn-xs"><i class="fa fa-times"></i> Eliminar</a></td>
											</tr>
											<tr>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td>xxxxx</td>
												<td><a href="#" class="btn btn-warning btn-xs"><i class="fa fa-retweet"></i> Actualizar</a></td>
												<td><a href="#" class="btn btn-danger btn-xs"><i class="fa fa-times"></i> Eliminar</a></td>
											</tr>
											
										</tbody>
									</table>
								</div>

							</div>
							<!-- /container -->
	</body>
</html>